import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image, ScrollView, Swiper, SwiperItem } from '@tarojs/components'
import './index.scss'

export default class SwiperBanner extends Component {
    static defaultProps = {
        className: '',
      }
      constructor(props) {
        super(props)
        this.state = {
          imgList: [
              {index:0,imgUrl:'https://haitao.nos.netease.com/b5ab8054-fd6c-437b-a646-0b7e193e4a71T19010292052_1920_400.jpg?imageView&thumbnail=1920x0&quality=95&type=webp'},
              {index:1,imgUrl:'https://haitao.nosdn2.127.net/e12fe5a5-df1e-48dc-8eee-54355b211749T1912161435_1920_506.jpg?imageView&thumbnail=1920x0&quality=90'}
          ],
          cashList: [],
          showUser: false,
          num: -1,
          cashData: {}
        }
      }
      componentWillMount () {
        // this._getBanner()
        // this._getCashSign()
      }
    
      // 跑马灯 设置定时器
      componentDidMount () {
        this.timerID = setInterval(
          () => this.tick(),
          3000)
      }
      // 清除 定时器
      componentWillUnmount () {
        clearInterval(this.timerID)
      }
      tick () {
        const { showUser, cashList } = this.state
        let { num } = this.state
        num++
        this.setState({
          showUser: !showUser,
          num,
          cashData: cashList[num]
        })
        if (num === cashList.length - 1) {
          clearInterval(this.timerID)
        }
      }
      _toLink = () => {}
      render () {
          const { imgList } = this.state
          return (
              <View className='swiper-banner'>
                <View className='swiper-banner-wrapper'>
                    <Swiper
                        autoplay
                        indicatorDots={true}
                        indicatorColor='#000'
                        indicatorActiveColor='#fff'
                        circular={true}
                        >
                        {imgList && imgList.length && imgList.map((item, index) =>
                        <SwiperItem
                            key={index}
                            className='swiper-banner-wrapper-item'
                        >
                        <View className='swiper-banner-wrapper-item-box' onClick={this._toLink.bind(this, item)}>
                        <Image mode='widthFix' className='swiper-banner-wrapper-item-box-img' src={item.imgUrl}></Image>
                        </View>
                    </SwiperItem>
                    )}
                    </Swiper>
                </View>
                <View className='swiper-banner-desc'>
                    <View className='swiper-banner-desc-item'>
                        <LiIcon name='icontijiaox' size='22'></LiIcon>
                        <Text className='text'>源头好货</Text>
                    </View>
                    <View className='swiper-banner-desc-item'>
                        <LiIcon name='icontijiaox' size='22'></LiIcon>
                        <Text className='text'>正品保证</Text>
                    </View>
                    <View className='swiper-banner-desc-item'>
                        <LiIcon name='icontijiaox' size='22'></LiIcon>
                        <Text className='text'>高性价比</Text>
                    </View>
                    </View>
            </View>
          )
      }
}
